	//素材转化为帧数
	function createframes(d,f,w,h){
		var arr=[];
		var x=0;
		var y=0;
		var w=w?w:30;
		var h=h?h:48;
		var d=d?d:4;
		var f=f?f:3;
		for(var i= 0;i<d;i++){
			y=h*i;
			arr[i]=new Array();
			for(var j=0;j<f;j++){
				x=w*j;
				arr[i][j]=[x,y,w,h];
			}
		}
		return arr;
	}  
	//精灵类
    function Sprite(x,y,delta,fps,scale,d,f,w,h){


        this.dx=this.dx?this.dx:x;
        this.dy=this.dy?this.dy:y;
        this.fps=fps;
        this.delay=1000/fps;
		this.delta=delta;
        this.last_update=0;
        //帧编号
        this.index=0;
        //方向
        this.direction=0;
		//比例
		this.scale=scale;
		//键盘事件
		this.e=false;
		//图片帧
		this.frames=createframes(d,f,w,h);
		//帧数
		this.framesnum=f;
    }   
    Sprite.prototype.update=function(canvas){
		var delta=this.delta;
        //获取当前时间
        var now=(new Date()).getTime();
        if((now-this.last_update)>this.delay){
			if(!this.e) this.e.keyCode=37;
           if(this.e.keyCode==37){
				this.direction=1;
				//改变 x 坐标
				this.dx=this.dx-4*delta/Math.sqrt(5);
				this.dy=this.dy-2*delta/Math.sqrt(5);
			}
           if(this.e.keyCode==38){
				this.direction=2;
				//改变 y 坐标
				this.dx=this.dx+4*delta/Math.sqrt(5);
				this.dy=this.dy-2*delta/Math.sqrt(5);
			}
           if(this.e.keyCode==39){
				this.direction=3;
				//改变 x 坐标
				this.dx=this.dx+4*delta/Math.sqrt(5);
				this.dy=this.dy+2*delta/Math.sqrt(5);
			}
           if(this.e.keyCode==40){
				this.direction=0;
				//改变 y 坐标
				this.dx=this.dx-4*delta/Math.sqrt(5);
				this.dy=this.dy+2*delta/Math.sqrt(5);
			}
            if(this.dx<0){
				this.dx=0;   
				if(this.direction==3){
					imx=imx+4*delta/Math.sqrt(5);
					imy=imy-2*delta/Math.sqrt(5);
				}else if(this.direction==0){
					imx=imx+4*delta/Math.sqrt(5);
					imy=imy+2*delta/Math.sqrt(5);
				}
            }
            //右边缘检测
            if((this.dx+this.dw*this.scale)>canvas.getAttribute("width")){
                this.dx=canvas.getAttribute("width")-this.dw*this.scale;
				if(this.direction==1){
					imx=imx-4*delta/Math.sqrt(5);
					imy=imy+2*delta/Math.sqrt(5);
				}else if(this.direction==2){
					imx=imx-4*delta/Math.sqrt(5);
					imy=imy-2*delta/Math.sqrt(5);
				}
            } 
            //上边缘检测
            if(this.dy<0){
                this.dy=0;
				if(this.direction==0){
					imx=imx+4*delta/Math.sqrt(5);
					imy=imy+2*delta/Math.sqrt(5);
				}else if(this.direction==1){
					imx=imx-4*delta/Math.sqrt(5);
					imy=imy+2*delta/Math.sqrt(5);
				}
            }
            //下边缘检测
            if((this.dy+this.dh*this.scale)>canvas.getAttribute("height")){
                this.dy=canvas.getAttribute("height")-this.dh*this.scale;
				if(this.direction==3){
					imx=imx-4*delta/Math.sqrt(5);
					imy=imy+2*delta/Math.sqrt(5);
				}else if(this.direction==0){
					imx=imx+4*delta/Math.sqrt(5);
					imy=imy+2*delta/Math.sqrt(5);
				}
            } 

            //取出当前帧的坐标
            this.frame=this.frames[this.direction];
            
			//取出帧数
			if(this.index>this.framesnum-1) this.index=0;
            //当前帧在大图中的位置
            this.sx=this.frame[this.index][0];
            this.sy=this.frame[this.index][1];
            this.sw=this.frame[this.index][2];
            this.sh=this.frame[this.index][3];
            
            //当前帧大小
            this.dw=this.frame[this.index][2];
            this.dh=this.frame[this.index][3];
            
 			//循环帧
            this.index++;
            this.last_update=now;
			canvas.style.backgroundPosition=imx+'px '+imy+'px';
        }
    }
    //动画类
    function animate(){
        interval = setInterval(function(){
			drawImage();			
        },1);
       
    }
	//绘制图像 
	function drawImage(){
			//清空画布
            ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
            //更新数据
            sprite.update(canvas);
			sprite1.update(canvas);
            //保存状态
            ctx.save();
            //移动坐标
            ctx.translate(sprite.dx,sprite.dy);		
            ctx.scale(scale,scale);
			ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);
			ctx.restore();
			ctx.save();
            ctx.translate(sprite1.dx,sprite1.dy);
			ctx.scale(scale,scale);				
			ctx.drawImage(img1,sprite1.sx,sprite1.sy,sprite1.sw,sprite1.sh,0,0,sprite1.dw,sprite1.dh);
           
			//恢复状态
            ctx.restore();
	}
	//开始
	function start(evt){
		press = true;
		if(timeout) clearTimeout(timeout);
		sprite1.e=sprite.e=  (evt) ? evt : window.event;
		keyCode=sprite.e.keyCode;
		if (!interval){
			animate();
		}
	}
	//结束
    function stop(evt){
			press = false;
			if(timeout) clearTimeout(timeout);
			timeout=setTimeout(function() {
							if (!press) {		
								clearInterval(interval);
								interval = null;				
							}
							
				}, 500);
    }

    var  sprite=new Sprite(198,285,delta,fps,scale,4,3,22,50);
	var  sprite1=new Sprite(238,285,delta,fps,scale,4,3,24,47);

	sprite.update(canvas);
	sprite1.update(canvas);
	var imx=1024;
	var imy=1024;
	var timeout=null;
	img.onload=function(){drawImage();}

	document.onkeydown = start; //键盘按下开始
	document.onkeyup = stop;      //键盘弹起 结束